<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <style>
      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #player-container,
      #toolbar {
        height: 100%;
        padding: 10px;
      }
      #player {
        height: 100%;
      }
      .col-2 {
        width: 50%;
        float: left;
        display: inline-block;
        padding: 5px;
      }
      textarea {
        resize: none;
        word-break: break-all;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="player-container" class="col-2">
      <div id="player"></div>
    </div>
    <div id="toolbar" class="col-2">
      <fieldset>
        <legend>平台信息</legend>
        <div>
          <label for="ip">ip</label>
          <input id="ip" type="text" value="10.210.141.41" />
        </div>
        <div>
          <label for="port">端口</label>
          <input id="port" type="number" value="9060" />
        </div>
        <div>
          <label for="username">用户名</label>
          <input id="username" type="text" value="admin" />
        </div>
        <div>
          <label for="password">密码</label>
          <input id="password" type="text" value="123456" />
        </div>
        <button id="init">初始化并创建窗口</button>
      </fieldset>
      <fieldset>
        <legend>预览播放</legend>
        <div>
          <input type="radio" name="preview" value="1" checked id="preview-r-1" /><label for="preview-r-1"
            >通道编码</label
          >
          <input type="radio" name="preview" value="2" id="preview-r-2" /><label for="preview-r-2"
            >监控点编号+通道号</label
          >
          <div id="preview2" style="display: none">
            <label for="previewCameraId">监控点编号</label>
            <input id="previewCameraId" type="text" />
            <label for="previewChannelNo">通道号</label>
            <input id="previewChannelNo" type="text" />
          </div>
          <div id="preview1">
            <label for="previewChannelId">通道编码</label>
            <input id="previewChannelId" type="text" />
          </div>
          <button id="previewPlay">播放</button>
        </div>
      </fieldset>
      <fieldset>
        <legend>录像回放</legend>
        <div>
          <input type="radio" name="playback" value="1" checked id="playback-r-1" /><label for="playback-r-1"
            >通道编码</label
          >
          <input type="radio" name="playback" value="2" id="playback-r-2" /><label for="playback-r-2"
            >监控点编号+通道号</label
          >
          <div id="playback2" style="display: none">
            <label for="playbackCameraId">监控点编号</label>
            <input id="playbackCameraId" type="text" />
            <label for="playbackChannelNo">通道号</label>
            <input id="playbackChannelNo" type="text" />
          </div>
          <div id="playback1">
            <label for="playbackChannelId">通道编码</label>
            <input id="playbackChannelId" type="text" />
          </div>
          <div>
            <label for="recordType">录像类型</label>
            <input id="recordType" type="number" value="0" />
          </div>
          <div>
            <label for="startTime">开始时间</label>
            <input id="startTime" />
          </div>
          <div>
            <label for="endTime">结束时间</label>
            <input id="endTime" />
          </div>
          <button id="playbackPlay">播放</button>
        </div>
      </fieldset>
      <fieldset>
        <legend>JSON自定义指令</legend>
        <div class="col-2">
          <textarea
            placeholder='例如：{"method":"window.set_layout","data":{"layout":"1+2"}}'
            name="code"
            id="code"
            cols="10"
            rows="4"
          >
{"method":"window.set_layout","data":{"layout":"1+2"}}</textarea
          >
        </div>
        <div class="col-2"><textarea name="result" id="result" cols="10" rows="4">执行结果</textarea></div>
        <button id="execute">执行</button>
      </fieldset>
      <fieldset>
        <legend>销毁</legend>
        <button id="destroy">销毁</button>
      </fieldset>
    </div>
    <script>
      let isInit = false;
      var ins;
      function init() {
        // debugger;
        ins = WebPlugin({
          container: player,
          successCallback: function () {
            isInit = true;
            console.log('实例化成功');
            ins
              .JS_RequestInterface({
                method: 'system.init',
                data: {
                  ip: ip.value,
                  port: parseInt(port.value),
                  username: username.value,
                  password: password.value,
                },
              })
              .then(function (res) {
                if (res.code === 0) {
                  ins.JS_RequestInterface({
                    method: 'window.create',
                    data: {
                      layout: '1x1',
                    },
                  });
                }
              });
          },
          errorCallback: function () {
            console.log('实例化失败');
          },
        });
      }

      function execute() {
        if (!isInit) {
          console.warn('插件还没实例化成功');
          return;
        }
        try {
          let params = JSON.parse(code.value);
          ins.JS_RequestInterface(params).then((res) => {
            result.value = JSON.stringify(res);
          });
        } catch (error) {
          console.log(error);
        }
      }

      document.addEventListener('click', function (e) {
        switch (e.target.id) {
          case 'init':
            init();
            break;
          case 'execute':
            execute();
            break;
          case 'previewPlay':
            var params =
              document.querySelector('[name=preview]:checked').value === '1'
                ? {
                    channel_id: previewChannelId.value,
                  }
                : {
                    camera_id: previewCameraId.value,
                    channel_no: previewChannelNo.value,
                  };
            ins.JS_RequestInterface({
              method: 'play.preview',
              data: params,
            });
            break;
          case 'playbackPlay':
            var params =
              document.querySelector('[name=playback]:checked').value === '1'
                ? {
                    channel_id: playbackChannelId.value,
                  }
                : {
                    camera_id: playbackCameraId.value,
                    channel_no: playbackChannelNo.value,
                  };
            Object.assign(params, {
              record_type: parseInt(recordType.value),
              start_time: startTime.value,
              end_time: endTime.value,
            });
            ins.JS_RequestInterface({
              method: 'play.playback',
              data: params,
            });
            break;
          case 'destroy':
            ins && ins.destroy();
        }
      });

      document.addEventListener('change', function (e) {
        var id = e.target.id;
        var value = e.target.value;
        var a, b;
        if (e.target.type === 'radio') {
          if (e.target.name === 'preview') {
            a = preview1;
            b = preview2;
          } else {
            a = playback1;
            b = playback2;
          }
          if (e.target.value === '1') {
            a.style.display = 'block';
            b.style.display = 'none';
          } else {
            b.style.display = 'block';
            a.style.display = 'none';
          }
        }
        try {
          var form = localStorage.getItem('form');
          if (!form) {
            form = {};
          } else {
            form = JSON.parse(form);
          }
          form[id] = value;
          localStorage.setItem('form', JSON.stringify(form));
        } catch (error) {}
      });

      var form = localStorage.getItem('form');
      if (form && JSON.parse(form)) {
        form = JSON.parse(form);
        for (var key in form) {
          document.getElementById(key).value = form[key];
        }
      }
      window.sessionStorage.setItem('vmsLoginConfig', JSON.stringify({ webBrowserPlayerVersion: 'V10.0.0.0' })); // demo跳过版本验证
    </script>
    <script defer src="./HZPlayerPlugin/webBrowserPlayer.js"></script>
    <script defer src="./HZPlayerPlugin/playbackExtends.js"></script>
    <script defer src="./HZPlayerPlugin/playerExtends.js"></script>
  </body>
</html>
